<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/personal_center.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/head_daohang.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- 主要布局范围 -->
<div class="main">
    <!-- 头部导航栏 -->
    <div class="main">
        <!-- 头部导航栏 -->
        <div id="head">
            <div class="layui-col-md2">
                <div class="grid-demo ">
                    <div class="head-logo"></div>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="grid-demo head-demo"><a href="${pageContext.request.contextPath}/index.jsp" class="word-1">首页</a></div>
            </div>
            <div class="layui-col-md2">
                <div class="grid-demo head-demo"><a href="${pageContext.request.contextPath}/car/getCarView" class="head-hover word-1">自驾租车</a>
                </div>
            </div>
            <%--    <div class="layui-col-md1">--%>
            <%--        <div class="grid-demo head-demo"><a href="${pageContext.request.contextPath}/long_time_older/long_time.jsp" class="head-hover word-1">长租专区</a>--%>
            <%--        </div>--%>
            <%--    </div>--%>
            <div class="layui-col-md2">
                <div class="grid-demo head-demo"><a href=" ${pageContext.request.contextPath}/carOutlets/carAllList" class="head-hover word-1">车型查询</a>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="grid-demo head-demo"><a href="${pageContext.request.contextPath}/Offline_outlets/Business_outlets.jsp" class="head-hover word-1">营业网点</a></div>
            </div>
            <%--    <div class="layui-col-md1">--%>
            <%--        <div class="grid-demo head-demo"><a href="" class="head-hover word-1">会员专区</a></div>--%>
            <%--    </div>--%>
            <div class="layui-col-md2">
                <div class="grid-demo head-demo1">
                    <i class="login-icon"></i>
                    <a href="${pageContext.request.contextPath}/login/login.jsp" class="head-color">登录/注册</a>
                </div>
                <div class="tel">
                    <i class="tel-icon"></i>
                    <span class="tel-num">110-119-1111</span>
                </div>
            </div>
        </div>
        <!-- 面包屑 -->
        <div class="crumbs">
            <div class="crumbs-bd">当前位置: <a href="${pageContext.request.contextPath}/customer/getId/${cust.custId}" class="crumbs-person">个人中心</a> > </div>
        </div>
        <!-- 主要内容 -->
        <div class="content">
            <div class="content-bd">
                <!-- 左侧导航栏 -->
                <div class="col-sub">
                    <ul>
                        <div class="title">订单信息</div>
                        <li class="text"><a href=javascript:getMyAllOrders()>我的订单</a></li>
                        <%--                    <li class="text"><a href="${pageContext.request.contextPath}/customer/personalCenter-OtherOrler.jsp">他人代订</a></li>--%>
                        <%--                    <div class="title">会员信息</div>--%>
                        <%--                    <li class="text"><a href="">会员优惠</a></li>--%>
                        <%--                    <li class="text"><a href="">会员特权</a></li>--%>
                        <%--                    <li class="text"><a href="">会员积分</a></li>--%>
                        <div class="title">我的钱包</div>
                        <%--                    <li class="text"><a href="${pageContext.request.contextPath}/customer/personalCenter-AccountBalance.jsp">账户余额</a></li>--%>
                        <%--                    <li class="text"><a href="${pageContext.request.contextPath}/customer/personalCenter-Voucher.jsp">我的代金卷</a></li>--%>
                        <li class="text"><a href="javascript:method1()" class="mycoupon">我的优惠编码</a></li>
                        <div class="title">车辆喜好</div>
                        <li class="text"><a href="" id="hotCar">车辆推荐</a></li>
                        <div class="title">个人资料</div>
                        <li class="text"><a href="${pageContext.request.contextPath}/customer/getId/${cust.custId}/get_info" class="customMessage">用户信息</a></li>
                        <li class="text"  onclick="return confirm('即将返回登录界面，确定吗？');"><a href="${pageContext.request.contextPath}/login/login.jsp" class="exit-token">账户注销</a></li>
                    </ul>
                </div>
                <!-- 主要信息栏 -->
                <div class="col-main">
                    <div class="mo-order">
                        <div class="mo-clearfix">
                            <b class="mo-biaoti">自驾订单</b>
                            <ul class="mo-tab-hd">
                                <li class="mo-afli" id="l1">全部订单</li>
                                <li class="" id="l2">待支付</li>
                                <li class="" id="l3">租赁中</li>
                                <li class="" id="l4" >已完成</li>
                                <li class="" id="l5" >已取消</li>
                            </ul>
                        </div>
                        <div class="bd-text">
                            <ul>
                                <li id="l1">订单编号</li>
                                <li class="orderchexing" style="margin-left: 23%">车型</li>
                                <li id="l2" style="margin-left: 22.5%">取车时间</li>
                                <li style="margin-left: 10%">还车时间</li>
                                <li style="margin-left: 10.5%">订单状态</li>
                            </ul>
                        </div>


                        <c:forEach var="orders" items="${ordersById.data}">
                            <div class="bd-text-in">
                                <ul>
                                    <li id="l1">
                                        <c:if test="${orders.orderStatus == 0}"><a href="${pageContext.request.contextPath}/orders/getwaitPay/${orders.orderNo}" >${orders.orderNo}</a></c:if>
                                        <c:if test="${orders.orderStatus == 1}"><a href="${pageContext.request.contextPath}/orders/getOrderByNum/${orders.orderNo}" >${orders.orderNo}</a></c:if>
                                        <c:if test="${orders.orderStatus == 2}"><a href="${pageContext.request.contextPath}/orders/getOrderByNum/${orders.orderNo}" >${orders.orderNo}</a></c:if>
                                        <c:if test="${orders.orderStatus == 3}"><a href="${pageContext.request.contextPath}/orders/getOrderByNum/${orders.orderNo}" >${orders.orderNo}</a></c:if>
                                    </li>
                                    <li class="orderCar" >${orders.carName}/${orders.carSeat}座/${orders.carCase}/${orders.carDisplacement}T</li>
                                    <li id="l2" >${orders.orderPickupTime}</li>
                                    <li class="orderhuancheshijian" style="right: 540px">${orders.orderDropoffTime}</li>
                                    <li id="l3"><c:if test="${orders.orderStatus == 3}">已取消</c:if></li>
                                    <li id="l4" ><c:if test="${orders.orderStatus == 0}">待支付</c:if></li>
                                    <li id="l4" ><c:if test="${orders.orderStatus == 1}">租赁中</c:if></li>
                                    <li id="l4" ><c:if test="${orders.orderStatus == 2}">已完成</c:if></li>
                                </ul>
                            </div>
                        </c:forEach>


<%--                                                <div class="bd-text-in">--%>
<%--                                                    <ul>--%>
<%--                                                        <li id="l1"><a href="personalCenter-OrlerIn.jsp">1205613630</a></li>--%>
<%--                                                        <li>本田缤智混动沪牌/五厢/自动/1.5T</li>--%>
<%--                                                        <li id="l2">	2022/9/8 18:00:00</li>--%>
<%--                                                        <li>2022/9/8 18:00:00</li>--%>
<%--                                                        <li id="l4">待支付</li>--%>
<%--                                                    </ul>--%>
<%--                                                </div>--%>
<%--                        <div class="bd">--%>
<%--                            <span>您还没有任何订单，现在就去订车吧！</span>--%>
<%--                            <a href="${pageContext.request.contextPath}/vehicle/vehicle_screening.jsp">--%>
<%--                                <button>立刻预定</button>--%>
<%--                            </a>--%>
<%--                        </div>--%>
<%--                        <div class="bd1">--%>
<%--                            <span>您还没有正在待支付的订单，现在就去订车吧！</span>--%>
<%--                            <a href="${pageContext.request.contextPath}/vehicle/vehicle_screening.jsp">--%>
<%--                                <button>立刻预定</button>--%>
<%--                            </a>--%>
<%--                        </div>--%>
<%--                        <div class="bd2">--%>
<%--                            <span>您还没有正在租赁的订单，现在就去订车吧！</span>--%>
<%--                            <a href="${pageContext.request.contextPath}/vehicle/vehicle_screening.jsp">--%>
<%--                                <button>立刻预定</button>--%>
<%--                            </a>--%>
<%--                        </div>--%>
<%--                        <div class="bd3">--%>
<%--                            <span>您还没有已经完成的订单，现在就去订车吧！</span>--%>
<%--                            <a href="${pageContext.request.contextPath}/vehicle/vehicle_screening.jsp">--%>
<%--                                <button>立刻预定</button>--%>
<%--                            </a>--%>
<%--                        </div>--%>
<%--                        <div class="bd4">--%>
<%--                            <span>您还没有成功取消的订单，现在就去订车吧！</span>--%>
<%--                            <a href="${pageContext.request.contextPath}/vehicle/vehicle_screening.jsp">--%>
<%--                                <button>立刻预定</button>--%>
<%--                            </a>--%>
<%--                        </div>--%>
                    </div>

                </div>
            </div>
        </div>
        <!-- 尾部 -->
        <div class="footer">
            <div class="footer-box">
                <div class="footer-left">
                    <p>
                        <span>关于无忧</span> |
                        <span>移动客户端</span> |
                        <span>帮助中心</span> |
                        <span>建议专区</span> |
                        <span>联系我们</span> |
                        <span>友情连接</span> |
                        <span>投诉通道：400-821-1608</span>
                    </p>
                    <p>
                        <span>Copyright © 2007-2022 苏州无忧信息技术服务有限公司 ICP证：苏B2-20140130|苏ICP备08010394号-1</span>
                    </p>
                </div>
                <div class="footer-right"></div>
            </div>
        </div>
    </div>
</div>
<%--<script src="${pageContext.request.contextPath}/js/personal_center-MyOrler.js"></script>--%>
<script>
    loadInitData();

    function loadInitData(){
        console.log("00000000000000")
        var token = localStorage.getItem("token");
        // ----->cpmtollrt toke 你=-----
        console.log("token-----:"+token)

        $.ajax({
            type: "get",
            url: "${pageContext.request.contextPath}/customer/personalData",
            headers: {"token": token},
            success: function (result) {
                console.log(result);
                var loginUser = result.data.loginCustomer;

                if(loginUser != null) {
                    $(".head-color").text(loginUser.custName);
                    $(".head-color").attr("href", "");
                    $(".customMessage").attr("href","${pageContext.request.contextPath}/customer/getId/"+loginUser.custId + "/get_info");
                    $(".crumbs-person").attr("href","${pageContext.request.contextPath}/customer/getId/" + loginUser.custId)
                    $("#hotCar").attr("href","${pageContext.request.contextPath}/recommendByUser?custId=" + loginUser.custId + "&num=5")

                    hotCar
                }else{
                    console.log("2222222")
                    $(".head-color").text("登录");
                    $(".head-color").attr("href", "login/login.jsp");
                }
            }
        })
    }
    // 查询我的所有订单
    function getMyAllOrders(){
        var token = localStorage.getItem("token");
        location.href="${pageContext.request.contextPath}/orders/getOrdersByCustomerId/"+token;
    }

    function  method1() {
        console.log("点击")
        var token  = localStorage.getItem("token");
        location.href="${pageContext.request.contextPath}/customercoupon/getall?token="+token;
        // $(".mycoupon").attr("href","customercoupon/getall?token="+token);

    }

    document.querySelector(".content .content-bd .col-main .mo-order .mo-clearfix .mo-tab-hd").onclick = (function(event){
        var element = event.target
        var colli = document.querySelectorAll(".content .content-bd .col-main .mo-order .mo-clearfix .mo-tab-hd li")
        for(var i = 0;i < colli.length;i++){
            colli[i].className = ""
            console.log(colli[i].className)
        }
        element.className = "mo-afli"
    })



    // ---------------------------------------订单预览3个状态切换隐藏浏览框---------------------------------------
    //
    document.querySelector(".content .content-bd .col-main .mo-order .mo-clearfix .mo-tab-hd #l1").onclick = function(){
        document.querySelector(".content .content-bd .col-main .mo-order .bd-text").style.display="block"
        document.querySelector(".content .content-bd .col-main .mo-order .bd-text-in").style.display="block"
        document.querySelector(".content .content-bd .col-main .mo-order .bd").style.display="none"
        document.querySelector(".content .content-bd .col-main .mo-order .bd1").style.display="none"
        document.querySelector(".content .content-bd .col-main .mo-order .bd2").style.display="none"
        document.querySelector(".content .content-bd .col-main .mo-order .bd3").style.display="none"
        document.querySelector(".content .content-bd .col-main .mo-order .bd4").style.display="none"

    }
    // 查询我的待支付的订单
    function getMyWait4PayOrders(orderStatus){
        var token = localStorage.getItem("token");
        console.log("当前查询的订单状态是：" + orderStatus)
        location.href="${pageContext.request.contextPath}/orders/getOrdersByCustomerIdAndStatus/"+token+"/"+orderStatus;
    }

    //待支付  status = 1 , custId = ?
    document.querySelector(".content .content-bd .col-main .mo-order .mo-clearfix .mo-tab-hd #l2").onclick = function(){
        console.log("000000000000000000")
        getMyWait4PayOrders(0);
        document.querySelector(".content .content-bd .col-main .mo-order .bd-text").style.display="block"
        document.querySelector(".content .content-bd .col-main .mo-order .bd-text-in").style.display="block"
        document.querySelector(".content .content-bd .col-main .mo-order .bd").style.display="none"
        document.querySelector(".content .content-bd .col-main .mo-order .bd1").style.display="none"
        document.querySelector(".content .content-bd .col-main .mo-order .bd2").style.display="none"
        document.querySelector(".content .content-bd .col-main .mo-order .bd3").style.display="none"
        document.querySelector(".content .content-bd .col-main .mo-order .bd4").style.display="none"
    }

    document.querySelector(".content .content-bd .col-main .mo-order .mo-clearfix .mo-tab-hd #l3").onclick = function(){
        document.querySelector(".content .content-bd .col-main .mo-order .bd-text").style.display="none"
        document.querySelector(".content .content-bd .col-main .mo-order .bd-text-in").style.display="none"
        document.querySelector(".content .content-bd .col-main .mo-order .bd").style.display="none"
        document.querySelector(".content .content-bd .col-main .mo-order .bd1").style.display="none"
        document.querySelector(".content .content-bd .col-main .mo-order .bd2").style.display="block"
        document.querySelector(".content .content-bd .col-main .mo-order .bd3").style.display="none"
        document.querySelector(".content .content-bd .col-main .mo-order .bd4").style.display="none"
    }

    document.querySelector(".content .content-bd .col-main .mo-order .mo-clearfix .mo-tab-hd #l4").onclick = function(){
        console.log("11111111111111111111111111111")
        getMyWait4PayOrders(1);
        document.querySelector(".content .content-bd .col-main .mo-order .bd-text").style.display="none"
        document.querySelector(".content .content-bd .col-main .mo-order .bd-text-in").style.display="none"
        document.querySelector(".content .content-bd .col-main .mo-order .bd").style.display="none"
        document.querySelector(".content .content-bd .col-main .mo-order .bd1").style.display="none"
        document.querySelector(".content .content-bd .col-main .mo-order .bd2").style.display="none"
        document.querySelector(".content .content-bd .col-main .mo-order .bd3").style.display="block"
        document.querySelector(".content .content-bd .col-main .mo-order .bd4").style.display="none"
    }
    document.querySelector(".content .content-bd .col-main .mo-order .mo-clearfix .mo-tab-hd #l5").onclick = function(){
        console.log("2222222222222222222")
        getMyWait4PayOrders(2);
        document.querySelector(".content .content-bd .col-main .mo-order .bd-text").style.display="block"
        document.querySelector(".content .content-bd .col-main .mo-order .bd-text-in").style.display="block"
        document.querySelector(".content .content-bd .col-main .mo-order .bd").style.display="none"
        document.querySelector(".content .content-bd .col-main .mo-order .bd1").style.display="none"
        document.querySelector(".content .content-bd .col-main .mo-order .bd2").style.display="none"
        document.querySelector(".content .content-bd .col-main .mo-order .bd3").style.display="none"
        document.querySelector(".content .content-bd .col-main .mo-order .bd4").style.display="none"
    }
</script>
</body>
</html>
